<template>
  <Header :topMsg="topMsg" :flag='true'/>
  <FeaList @click="goSocialExt" msg="好友动态" className="iconfont icon-QQkongjian dt"/>
  <div class="shadow"></div>
  <div class="feed">
    <div class="left">
      <i class="iconfont icon-youxizhongxin"></i>
      <span>游戏中心</span>
    </div>
    <div class="iconfont icon-jinrujiantou right"></div>
  </div>
  <div class="feed">
    <div class="left">
      <i class="iconfont icon-fujin"></i>
      <span>附近</span>
    </div>
    <div class="iconfont icon-jinrujiantou right"></div>
  </div>
  <div class="shadow"></div>

  <FeaList 
    v-for="item in feaList"
    :key="item.id"
    :msg="item.msg"
    :className="item.className"
  />
  <TabBar/>
</template>

<script setup>
  import {reactive} from 'vue'
  import { useRouter } from 'vue-router'
  import Header from '@/components/Header.vue'
  import FeaList from '../components/FeaList.vue'
  import TabBar from '../components/TabBar'

  const router = useRouter()

  const topMsg = reactive({
    kwh: 'iconfont icon-dianliang- kwh',
    name: '动态',
    rightIco: 'iconfont icon-shezhiORgengduo jia'
  })

  const feaList = reactive([
    {
      id: '01',
      className: 'iconfont icon-yinle',
      msg: '音乐'
    },
    {
      id: '02',
      className: 'iconfont icon-yundongbisai',
      msg: '运动'
    },
    {
      id: '03',
      className: 'iconfont icon-xinwenguanli',
      msg: '腾讯新闻'
    },
    {
      id: '04',
      className: 'iconfont icon-wendangwenjian',
      msg: '腾讯文档'
    },
    {
      id: '05',
      className: 'iconfont icon-gengduoyingyong',
      msg: '更多'
    },
  ])

  const goSocialExt = () => {
    router.push({
      path: '/socialext'
    })
  }
</script>

<style>

.shadow {
  width: 100%;
  height: 10px;
  /* margin-top: 5px; */
  background-color: rgb(236, 239, 239);
}
</style>